<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <div class="header">{{$route.query.id ? '试题修改' : '试题录入'}}</div>
        <!-- 主体内容 -->
        <div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            style="padding-top: 20px"
          >
            <!-- 学科： -->
            <el-form-item label="学科：" prop="subjectID">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                class="el-medium"
                @change="selectFn"
              >
                <el-option
                  v-for="(item, index) in subjectName"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 目录： -->
            <el-form-item label="目录：" prop="catalogID">
              <el-select
                v-model="form.catalogID"
                placeholder="请选择"
                class="el-medium"
              >
                <el-option
                  v-for="(item, index) in directoryList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 企业： -->
            <el-form-item label="企业：" prop="enterpriseID">
              <el-select
                v-model="form.enterpriseID"
                placeholder="请选择"
                class="el-medium"
              >
                <el-option
                  v-for="(item, index) in shortNameList"
                  :key="index"
                  :label="item.company"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 城市： -->
            <el-form-item label="城市：" prop="city">
              <div class="city">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  class="el-select-medium"
                  @change="selectCityFn"
                >
                  <el-option
                    v-for="(item, index) in provincesList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="请选择"
                  class="el-select-medium"
                >
                  <el-option
                    v-for="(item, index) in citysList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <!-- 方向： -->
            <el-form-item label="方向：" prop="direction">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
                class="el-medium"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 题型： -->
            <el-form-item label="题型：" prop="questionType">
              <el-radio-group v-model="form.questionType">
                <el-radio
                  v-for="(item, index) in questionTypeList"
                  :key="index"
                  :label="String(item.value)"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 难度： -->
            <el-form-item label="难度：" prop="difficulty">
              <el-radio-group v-model="form.difficulty">
                <el-radio
                  v-for="(item, index) in difficultyList"
                  :key="index"
                  :label="String(item.value)"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 题干：富文本框 -->
            <el-form-item label="题干：" prop="question">
              <quill-editor
                v-model="form.question"
                :options="editorOption"
                @change="questionChangeFn($event)"
              ></quill-editor>
            </el-form-item>

            <!-- 选项：单选 多选按钮-->
            <el-form-item label="选项：" v-if="form.questionType !== '3'">
              <div
                class="option_item"
                v-for="(item, index) in form.options"
                :key="index"
              >
                <!-- 单选框 -->
                <el-radio
                  @change="raidoOrCheckboxFn"
                  v-if="form.questionType === '1'"
                  v-model="item.isRight"
                  :label="1"
                  >{{item.code}} ：
                </el-radio>
                <!-- 多选框 -->
                <el-checkbox
                v-else
                v-model="item.isRight"
                :checked="item.isRight === 1 ? true :false"
                  >{{item.code}} :</el-checkbox
                >
                <!-- 输入框 -->
                <el-input v-model="item.title" style="width: 240px"></el-input>
                <!-- 上传图片 -->
                <el-upload
                  class="uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                >
                  <span class="text">上传图片</span>
                  <i class="el-icon-circle-close"></i>
                </el-upload>
              </div>
              <el-button
                size="small"
                type="danger"
                :disabled="form.questionType !== '2'"
                @click="addOptionFn"
                >+增加选项与答案</el-button
              >
            </el-form-item>

            <!-- 解析视频： -->
            <el-form-item label="解析视频：">
              <el-input v-model="form.videoURL" class="el-medium"></el-input>
            </el-form-item>

            <!-- 答案解析：富文本框 -->
            <el-form-item label="答案解析：" prop="answer">
              <quill-editor
                v-model="form.answer"
                :options="editorOption"
                @change="answerChangeFn($event)"
              ></quill-editor>
            </el-form-item>

            <!-- 题目备注：文本域 -->
            <!-- rows: 控制文本域高度 -->
            <el-form-item label="题目备注：">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                class="el-medium"
                v-model="form.remarks"
              >
              </el-input>
            </el-form-item>

            <!-- 试题标签 -->
            <!-- 为 el-select设置multiple属性即可启用多选 -->
            <el-form-item label="试题标签：">
              <el-select
                v-model="form.tags"
                multiple
                placeholder="请选择"
                class="el-medium"
              >
                <el-option
                  v-for="(item, index) in tagsList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 确认提交按钮 -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="!$route.query.id">确认提交</el-button>
              <el-button type="success" @click="editSubmit" v-else>确认修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 按需导入下载富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 导入富文本样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入富文本中代码高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
// 导入学科简单列表API
import { simple } from '@/api/hmmm/subjects.js'
// 导入企业列表API
import { list } from '@/api/hmmm/companys.js'
// 导入目录详情API
import { simple as diretorysSimple } from '@/api/hmmm/directorys.js'
// 导入题库添加API、基础题库详情、修改API
import { add, detail, update } from '@/api/hmmm/questions.js'
// 导入试题标签数据
import { simple as tagSimple } from '@/api/hmmm/tags.js'
// 导入题型、难度、方向的枚举数据
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
// 导入城市的枚举数据
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  components: {
    // 将富文本编辑器注册为组件
    quillEditor
  },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            // code：代码，title：标题，img：图片url，isRight: 是否正确
            code: 'A',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [{ required: true, trigger: 'change' }],
        difficulty: [{ required: true, trigger: 'change' }],
        question: [{ required: true, message: '请输入题干' }],
        answer: [{ required: true, message: '请输入答案解析' }]
      },
      subjectName: [], // 学科名称数据
      directoryList: [], // 目录列表数据
      shortNameList: [], // 企业管理列表数据
      provincesList: [], // 城市数据
      citysList: [], // 城市下地区
      directionList: direction, // 方向数据
      questionTypeList: questionType, // 题型数据
      difficultyList: difficulty, // 难度数据
      tagsList: [], // 试题标签数据
      // rightAnswer: true, // 点击'单选'按钮就为true的变量
      contentText: '', // 富文本纯内容
      index: 1, //
      editorOption: {
        // 富文本框的配置项
        modules: {
          // 富文本头部工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块，图片，超链接
          ],
          syntax: {
            highlight: (text) => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      }
    }
  },

  created () {
    // 调用获取学科简单列表方法
    this.subjectFn()
    // 调用获取企业列表数据的方法
    this.listFn()
    // 调用省份列表数据的方法
    this.provincesFn()
    // 调用数据回显方法
    this.showDataFn()
  },

  methods: {
    // 获取学科简单列表方法
    async subjectFn () {
      const res = await simple()
      // console.log(res);
      this.subjectName = res.data
    },

    // 获取企业列表数据的方法
    async listFn () {
      const res = await list(this.form)
      // console.log(res);
      this.shortNameList = res.data.items
      // console.log(this.shortNameList);
    },

    // 定义省份数据方法
    async provincesFn () {
      const provincesDatas = await provinces()
      // console.log(provincesDatas);
      this.provincesList = provincesDatas
    },

    // 选择地区数据的方法
    async selectCityFn () {
      // 调用获取地区数据的方法时传入选择的省份来获取该省份下的地区
      const cityDatas = await citys(this.form.province)
      // console.log(cityDatas);
      this.citysList = cityDatas
    },

    // 选了学科联动目录数据方法
    async selectFn () {
      const diretorysRes = await diretorysSimple({
        subjectID: this.form.subjectID
      })
      // console.log(res);
      this.directoryList = diretorysRes.data
      // 选择了学科后联动试题标签下拉框(多选)
      const tagsRes = await tagSimple({ subjectID: this.form.subjectID })
      // console.log(tagsRes);
      this.tagsList = tagsRes.data
    },

    // 单选或多选的方法，value--指当前选择的是单选或多选或简答
    raidoOrCheckboxFn (value) {
      // 对 from 表单进行映射，定义变量接收满足要求的新数组
      const answer = this.form.options.map((item) => {
        // 每一次进来都让 isRight把之前的 true 状态进行改变，方便后面的判断筛选
        item.isRight = false
        // 若映射的 item.code 等于 当前所选的，说明点击的当前按钮为正确选项
        if (item.code === value) {
          // 把控制正确答案的变量赋值为 true, 在提交表单数据的时候发给后台
          item.isRight = true
        }
        // 返回每一次映射满足要求的 item数据
        return item
      })
      // 将满足要求的新数组数据赋值给表单项中的 options选项
      this.form.options = answer
    },

    // 监听题干富文本内容发生变化
    questionChangeFn ({ quill, html, text }) {
      this.$refs.form.validateField('question')
    },

    // 监听答案解析富文本内容发生变化
    answerChangeFn ({ quill, html, text }) {
      this.$refs.form.validateField('answer')
    },

    // 单击按钮增加选项的方法
    addOptionFn () {
      // 依次递增的 字母
      const option = String.fromCharCode('D'.charCodeAt(0) + this.index)
      // 将其追加到 options 中 code 字段中, 增加字母的同时，其余字段也需要追加进去，重新生成一个包含 新选项
      this.form.options.push({
        code: option,
        title: '',
        img: '',
        isRight: false
      })
      // 让索引值 +1
      this.index = this.index++
    },

    // 确定提交按钮
    onSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        this.form.tags = this.form.tags.join()
        await add(this.form)
        // console.log(res)
        // 为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组
        this.form.tags = []
        // 给用户提示
        this.$message.success('添加数据成功')
        // 跳转到基础题库列表
        this.$router.push('/questions/list')
      })
    },

    // 基础题库|精选题库点击修改按钮跳转试题录入页面后数据回填方法
    async showDataFn () {
      if (this.$route.query.id !== undefined) {
        // 将获取的路由id传给基础题库详情API
        const res = await detail({ id: this.$route.query.id })
        // console.log(res)
        this.form = res.data
      }
    },

    // 点击确认修改
    async editSubmit () {
      const res = await update({ ...this.form })
      console.log(res)
      // 给用户提示
      this.$message.success('修改成功')
      // 跳转到基础题库列表
      this.$router.push('/questions/list')
    }
  }
}
</script>

<style lang="scss">
.option_item {
  padding-bottom: 20px;
  .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 0px;
  }
}
.option_item .uploader {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.option_item .uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
  margin-left: 5px;
  /* overflow: hidden; */
}
.option_item .uploader .el-upload:hover {
  border-color: #409eff;
}
.option_item .uploader .el-icon-circle-close {
  position: absolute;
  right: 0px;
  top: 0px;
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 16px;
  color: #999;
}

.text {
  font-size: 14px;
  color: #8c939d;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 65px;
}
.el-checkbox.el-input {
  display: inline;
}
</style>
<style scoped>
.app-container .header {
  padding: 0px 20px 18px 0px;
  border-bottom: 1px solid #edeff2;
  box-sizing: border-box;
}

/* .el-card__header {
  padding: 0px 20px 18px 0px;
  border-bottom: 1px solid #edeff2;
  box-sizing: border-box;
} */

.el-medium {
  width: 400px !important;
}

.city {
  width: 400px;
  display: flex;
  justify-content: space-between;
}

.el-select-medium {
  width: 198px;
}

.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
</style>
